<template name="zy-search">
	<view>
		<view class="" style="background-color: #f7cb50">

			<view class="search">

				<!-- #ifdef APP-PLUS -->
				<image src="../../static/zy-search/voice.svg" mode="aspectFit" @click="startRecognize()"
					class="voice-icon">
				</image>
				<!-- #endif -->
				<template v-if="isFocus">
					<input maxlength="20" focus type="text" value="" confirm-type="search" @confirm="searchStart()"
						placeholder="请输入关键词搜索" v-model.trim="searchText" />
				</template>
				<template v-else>
					<input maxlength="20" type="text" value="" confirm-type="search" @confirm="searchStart()"
						placeholder="请输入关键词搜索" v-model.trim="searchText" />
				</template>
				<image src="../../static/zy-search/search.svg" mode="aspectFit" @click="searchStart()"
					class="search-icon">
				</image>
			</view>
			<view class="cancel" @click="cancel">
				取消
			</view>
		</view>
		<!-- 		<view class="tabs" v-if="!show">
			<view class="left " @click="tabsChange(0)" :class="{ leftTabs:tabClass==0}">
				教育摘要
			</view>
			<view class="" style="margin-top: 10rpx;font-size: 25px; color: #c8c8c8; font-weight: normal;">
				|
			</view>
			<view class="right" @click="tabsChange(1)" :class="{ leftTabs:tabClass==1}">
				校园通知
			</view>

		</view> -->
		<z-tabs :list="list" v-if="!show" @change="tabsChange">

		</z-tabs>
		<view class="" style="height: 20rpx;">

		</view>
		<view class="" v-if="!show&&tabChoose==0">
			<view class="footer-top">
				<view v-for="(slide, i) in educationList" :index="i" :key="i">
					<view class="footerBorder">
						<view class="footer" @click="gotoEducationDetails(slide)">
							<view class="footer-image">
								<image :src="imageList(slide.educationUrl)"></image>
							</view>
							<view class="footer-content">
								<view class="content-title">
									{{slide.educationTitle}}
								</view>
								<view>
									<mp-html class="content-body" :content="slide.educationContent" />
								</view>
								<view class="date" :date="slide.createTime" format="MM/dd">
									{{slide.createTime}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="educationList.length==0">
				<block>
					<u-empty text="暂无内容"></u-empty>
				</block>
			</view>
		</view>
		<view class="" v-if="!show&&tabChoose==1">
			<!-- 通知 -->
			<view class="footer-top">
				<view v-for="(slide, i) in noticeList" :index="i" :key="i">
					<view class="footerBorder">
						<view class="footer" @click="gotoNoticeDetails(slide)">
							<view class="footer-image">
								<image :src="imageList(slide.noticeUrl)"></image>
							</view>
							<view class="footer-content">
								<view class="content-title">
									{{slide.noticeTitle}}
								</view>
								<view>
									<mp-html class="content-body" :content="slide.noticeContent" />
								</view>
								<view class="date" :date="slide.createTime" format="MM/dd">
									{{slide.createTime}}
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view v-if="noticeList.length==0">
				<block>
					<u-empty text="暂无内容"></u-empty>
				</block>
			</view>
		</view>
		<view v-if="show">
			<view :class="'s-' + theme" v-if="hList.length > 0">
				<view class="header">
					历史记录
					<image src="../../static/zy-search/delete.svg" mode="aspectFit" @click="delhistory"></image>
				</view>
				<view class="list">
					<view v-for="(item,index) in hList" :key="index" @click="keywordsClick(item)">{{item}}</view>
				</view>
			</view>
			<view :class="'wanted-' + theme" v-if="showWant">
				<view class="header">猜你想搜的</view>
				<view class="list">
					<view v-for="(item,index) in hotList" :key="index" @click="keywordsClick(item)">{{item}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "zy-search",
		props: {
			educationList: {
				type: Array,
				default () {
					return []
				}
			},
			noticeList: {
				type: Array,
				default () {
					return []
				}
			},
			isFocus: { //是否自动获取焦点
				type: Boolean,
				default: false
			},
			theme: { //选择块级显示还是圆形显示
				type: String,
				default: 'block'
			},
			showWant: { //是否展示推荐菜单
				type: Boolean,
				default: false
			},
			hotList: { //推荐列表数据
				type: Array,
				default () {
					return []
				}
			},
			speechEngine: { //语音引擎=>讯飞:iFly,百度:'baidu'
				type: String,
				default: 'baidu'
			}
		},
		data() {
			return {
				searchText: '', //搜索关键词
				hList: uni.getStorageSync('search_cache'), //历史记录
				list: ["教育摘要", "校园通知"],
				show: true,
				tabChoose: 0,
			};
		},
		computed: {
			imageList() {
				return function(e) {
					if (e != null) {
						return e.split(",")[0]
					}
				}
			}
		},
		methods: {
			//详情页
			gotoEducationDetails(event) {
				uni.navigateTo({
					url: '/pages/home/education-details/index?item=' + encodeURIComponent(JSON.stringify(
						event))
				})

			},
			//详情页
			gotoNoticeDetails(event) {
				uni.navigateTo({
					url: '/pages/home/news-details/index?item=' + encodeURIComponent(JSON.stringify(event))
				})

			},
			tabsChange(index) {
				this.tabChoose = index
				if (index == 0) {
					this.$emit("search1", this.searchText)
				}
				if (index == 1) {
					this.$emit("search2", this.searchText)
				}
			},
			cancel() {
				this.tabChoose = 0
				if (this.searchText != "") {
					this.searchText = ""
					this.show = true
					this.$emit("clear")
				} else {
					this.$emit("cancel")
				}

			},
			searchStart: function() { //触发搜索
				let _this = this;
				if (_this.searchText == '') {
					uni.showToast({
						title: '请输入关键字',
						icon: 'none',
						duration: 1000
					});
				} else {
					_this.show = false
					if (this.tabChoose == 0) {
						_this.$emit("search1", this.searchText)
					} else {
						_this.$emit("search2", this.searchText)
					}
					// _this.$emit('getSearchText', _this.searchText);
					uni.getStorage({
						key: 'search_cache',
						success(res) {
							let list = res.data;
							if (list.length > 5) {
								for (let item of list) {
									if (item == _this.searchText) {
										return;
									}
								}
								list.pop();
								list.unshift(_this.searchText);
							} else {
								for (let item of list) {
									if (item == _this.searchText) {
										return;
									}
								}
								list.unshift(_this.searchText);
							}
							_this.hList = list;
							uni.setStorage({
								key: 'search_cache',
								data: _this.hList
							});
						},
						fail() {
							_this.hList = [];
							_this.hList.push(_this.searchText);
							uni.setStorage({
								key: 'search_cache',
								data: _this.hList
							});
							// _this.$emit('getSearchText', _this.searchText);
						}
					})
				}
			},
			keywordsClick(item) { //关键词搜索与历史搜索
				this.searchText = item;
				this.searchStart();
			},
			delhistory() { //清空历史记录
				this.hList = [];
				uni.setStorage({
					key: 'search_cache',
					data: []
				});
			},
			startRecognize: function() { //语音输入
				let _this = this;
				let options = {};
				options.engine = _this.speechEngine;
				options.punctuation = false; // 是否需要标点符号 
				options.timeout = 10 * 1000;
				plus.speech.startRecognize(options, function(s) {
					_this.searchText = _this.searchText + s;
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.search {

		width: 85%;
		position: relative;
		padding: 10rpx 0;
		padding-left: 10rpx;


		input {
			height: 70rpx;
			background-color: #F7F7F7;
			padding: 10upx 74upx;
			font-size: 28upx;
			border-radius: 50upx;
		}

		.voice-icon {
			height: 75rpx;
			width: 75rpx;
			padding: 16upx 20upx 16upx 0;
			position: absolute;
			left: 16upx;
			top: 4upx;
			z-index: 10;
		}

		.search-icon {
			height: 75rpx;
			width: 75rpx;
			padding: 16upx 20upx 16upx 0;
			position: absolute;
			right: 0rpx;
			top: 5rpx;
			z-index: 10;
		}

	}

	.cancel {
		position: absolute;
		top: 25rpx;
		right: 25rpx;
		color: white;
	}


	.s-block {
		margin-top: 30upx;

		.header {
			font-size: 32upx;
			padding: 30upx;
			position: relative;

			image {
				height: 50rpx;
				width: 50rpx;
				padding: 10upx;
				position: absolute;
				right: 40upx;
				top: 24upx;
			}
		}

		.list {
			display: flex;
			flex-wrap: wrap;

			view {
				width: 50%;
				color: #8A8A8A;
				font-size: 28upx;
				box-sizing: border-box;
				text-align: center;
				padding: 20upx 0;
				border-top: 2upx solid #FFF;
				border-left: 2upx solid #FFF;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				background-color: #F7F7F7;
			}
		}
	}

	.s-circle {
		margin-top: 30upx;

		.header {
			font-size: 32upx;
			padding: 30upx;
			border-bottom: 2upx solid #F9F9F9;
			position: relative;

			image {
				width: 36upx;
				height: 36upx;
				padding: 10upx;
				position: absolute;
				right: 40upx;
				top: 24upx;
			}
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			padding: 0 30upx 20upx;

			view {
				padding: 8upx 30upx;
				margin: 20upx 30upx 0 0;
				font-size: 28upx;
				color: #8A8A8A;
				background-color: #F7F7F7;
				box-sizing: border-box;
				text-align: center;
				border-radius: 20upx;
			}
		}
	}

	.wanted-block {
		margin-top: 30upx;

		.header {
			font-size: 32upx;
			padding: 30upx;
		}

		.list {
			display: flex;
			flex-wrap: wrap;

			view {
				width: 50%;
				color: #8A8A8A;
				font-size: 28upx;
				box-sizing: border-box;
				text-align: center;
				padding: 20upx 0;
				border-top: 2upx solid #FFF;
				border-left: 2upx solid #FFF;
				background-color: #F7F7F7;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}

	.wanted-circle {
		margin-top: 30upx;

		.header {
			font-size: 32upx;
			padding: 30upx;
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			padding: 0 30upx 20upx;

			view {
				padding: 8upx 30upx;
				margin: 20upx 30upx 0 0;
				font-size: 28upx;
				color: #8A8A8A;
				background-color: #F7F7F7;
				box-sizing: border-box;
				text-align: center;
				border-radius: 20upx;
			}
		}
	}

	// .tabs {
	// 	background-color: #FFF;
	// 	width: 100%;
	// 	display: flex;
	// 	flex-wrap: wrap;
	// 	justify-content: flex-start;
	// 	height: 90rpx;

	// 	.left {
	// 		width: 367rpx;
	// 		margin-top: 20rpx;
	// 		text-align: center;
	// 		color: #8c8c8c;
	// 		font-size: 32rpx;

	// 	}


	// 	.right {
	// 		width: 367rpx;
	// 		font-size: 32rpx;
	// 		text-align: center;
	// 		margin-top: 20rpx;
	// 		color: #8c8c8c;
	// 		// padding-right: 75rpx;
	// 	}

	// 	.leftTabs {
	// 		border-bottom: 1px solid #f7cb50;
	// 		color: #f7cb50;
	// 	}

	// }
	.footer {
		margin: 10px;
		display: flex;
		justify-content: space-between;

		.footer-image {
			display: block;
			width: 180rpx;
			height: 120rpx;
			margin-right: 10rpx;

			image {
				width: 180rpx;
				height: 120rpx;
			}
		}

		.footer-content {
			display: flex;
			flex-direction: column;
			width: 529rpx;
			margin-right: 380rpx;
		}
	}

	.content-title {
		color: black;
		font-weight: bold;
		width: 529rpx;
		font-size: 35rpx;
		// max-width: 310rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.content-body {
		font-size: 10px;
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		margin-bottom: 5px;
	}

	.date {
		padding-left: 270rpx;
	}

	.footer-top {
		background-color: #fff;
		display: flex;
		flex-direction: column;

		.footerBorder {
			border-bottom: 1px #c8c8c8 solid;
		}
	}

	.notice-content {
		display: block;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #482929;
		letter-spacing: 0;
		line-height: 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/*规定最多显示两行*/
	}
</style>
